import { useState } from "react";
// # react 在组件销毁时仍然保留状态 的方法
// 1. 将状态提升到父组件
// 2. 使用 React Context
// 3. 使用 Redux 或 Zustand 等状态管理库
function Son({ style }) {
  const [count, setcount] = useState(0);
  return (
    <div>
      <h2>组件重置状态</h2>
      <button style={style} onClick={() => setcount(count + 1)}>
        +1————————{count}
      </button>
    </div>
  );
}

function Chongzhi() {
  const [show, setshow] = useState(true);
  return (
    <div className="list">
      <h1>组件重置状态</h1>
      <button onClick={() => setshow(!show)}>切换</button>
      {/* {show && <Son />} */}
      {/* react 当组件位置没有变化时 会保留状态  可以通过添加不同的key或者在组件外添加不同的标签重置 */}
      {show ? (
        <Son style={{ border: "1px solid red" }} key="son2" />
      ) : (
        <Son key="son1" />
      )}
    </div>
  );
}

export default Chongzhi;
